<template>
	<view>
		<u-navbar :background="background" back-icon-color="#000000" :immersive="true" title=" " :border-bottom="false">
		</u-navbar>
		<u-swiper height="650" :autoplay="false" mode="number" img-mode="scaleToFill" indicator-pos="bottomRight" :list="info.images"></u-swiper>
		<view class="wrap">
			<view class="box">
				<view class="price n-flex-row n-justify-between n-align-center">
					<view class="qian">￥{{info.price}}</view>
					<view class="bi">{{info.integral}}幸运币</view>
				</view>
				<view style="margin-top: 10rpx;font-size: 32rpx;">
					{{info.title}}
				</view>
			</view>
			<!-- <view class="box">
				<view class="pai">
					<image src="../../static/image/se.webp" mode=""></image>
					映趣
				</view>
			</view> -->
			<view class="info">
				<view class="tit">
					商品详情
				</view>
				<view class="goods_content">
					<u-parse :html="info.content"></u-parse>
				</view>
			</view>
		</view>

		<view class="gao"></view>

		<view class="btm" v-if="isShowbuy">
			<view class="btmbox">
				<!-- #ifndef MP-WEIXIN -->
				<view class="kefu n-shrink-0" @click="lxkefu">
					<image src="../../static/image/m_.png" mode=""></image>
					<view style="color: #666">客服</view>
				</view>
				<!-- #endif -->
				
				<!-- #ifdef MP-WEIXIN -->
				<button class="kefu kefubtn n-shrink-0" open-type="contact">
					<image src="../../static/image/m_.png" mode=""></image>
					<view style="color: #666">客服</view>
				</button>
				<!-- #endif -->
				
				<view class="btns">
					<button class="huan" @click="show = true;isBuy = true" style="width: 100%;">立即购买</button>
				</view>
			</view>
		</view>

		<u-popup v-model="show" @close="close" mode="bottom" :safe-area-inset-bottom="true">
			<view class="buybox">
				<view class="goods n-flex-row">
					<view class="picbox">
						<image :src="info.goodsPic" mode=""></image>
					</view>
					<view class="textbox">
						<view class="price">￥<text>{{info.price}}</text></view>
						<view class="price" style="color: #FC7802;"><text>{{info.integral}}</text>幸运币</view>
						<!-- <view class="stock">库存：{{info.stock}}件</view> -->
					</view>
				</view>
				<!-- <view class="xinghao">
					<view class="tit">型号</view>
					<view class="xhList">
						<view class="list active">128GB</view>
						<view class="list">256GB</view>
						<view class="list">512GB</view>
					</view>
				</view> -->
				<view class="selectNum">
					<view class="">购买数量</view>
					<u-number-box v-model="num" :min="1" :max="999" @change="valChange"></u-number-box>
				</view>
				<button class="buy btn" v-if="isBuy" @click="buy">立即购买</button>
			</view>
		</u-popup>
		<kefu :isShow='kfshow' ref="child" @cusEvent="hide"></kefu>
	</view>
</template>

<script>
	import kefu from '@/components/kefu.vue'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '',
				},
				show: false,
				num: 1,
				isBuy:true,
				id:'',
				info:'',
				kfshow:false,
				bi: 0,
				isShowbuy:true
			}
		},
		components: {
			kefu
		},
		onPageScroll(e) {
			if (e.scrollTop >= 150) {
				this.background.backgroundColor = "#fff"
			} else {
				this.background.backgroundColor = ""
			}
		},
		onLoad(option) {
			this.id = option.id
			if(option.buy){
				this.isShowbuy = false
			}
			this.getInfo()
			this.getBi()
		},
		methods: {
			hide() {
				this.kfshow = false
			},
			// 联系客服
			lxkefu() {
				this.$refs.child.getKf()
				this.kfshow = true
			},
			buy(){
				var data = {
					type:1,
					id:this.info.id,
					image:this.info.goodsPic,
					name:this.info.title,
					num:this.num,
					price:this.info.price,
					integral:this.info.integral,
					freight_value:this.info.freight_value
				}
				uni.setStorageSync('goods',data)
				uni.navigateTo({
					url:'/pages/mall/confirmOrder'
				})
			},
			getBi(){
				this.$http({
					url: "api/member/get_user_info",
				}).then(res => {
					if (res.data.code == 1) {
						this.bi = res.data.data.member.integral
						uni.setStorageSync('user', res.data.data.member)
						uni.$emit('updataUser');
					}
				}).catch(err => {});
			},
			getInfo(){
				this.$http({
					url: "api/common/get_goods_info",
					data: {
						id:this.id
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.info = res.data.data
						this.info.goodsPic = this.info.image
					}
				}).catch(err => {});
			},
			formatRichText(html) {
				if(!html){
					return
				}
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi,
						'width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="width:100%;height:auto;display:block;"');
				return newContent;
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			// 弹出层收起
			close(){
				this.num = 1
			}
		}
	}
</script>

<style>
	@import url("../../common/css/goodsInfo.css");
</style>
